<template>
  <div class="home">
    <!-- <HelloWorld msg="我是首页" /> -->
    <!-- <img :src="Logo" alt="" /><br /> -->
    <button @click="handleClick">获取接口实例</button>
    <p>{{ res }}</p>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld";
import { getInfoApi } from "@/api/test";
import Logo from "@/assets/logo.png";
export default {
  name: "Home",
  data() {
    return {
      Logo,
      res: null,
    };
  },
  components: {
    HelloWorld,
  },
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  mounted() {
    console.log("mounted");
  },
  // 当data数据更改时触发
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  // 切换路由时触发
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("destroyed");
  },
  methods: {
    handleClick() {
      this.getData();
    },
    // 请求
    async getData() {
      let parmas = { postId: 1 };
      const res = await getInfoApi(parmas);
      this.res = res;
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  button {
    width: 88px; /*no*/
    height: 44px;
    background: lightpink;
  }
}
</style>
